<template>
	<view>
		<u-navbar :is-fixed='true' :background="{backgroundColor: '#F0F0F0'}" :is-back="false" title="首页">
			<view slot='left' class="top_left">
				<image src="../../static/home_page/wd.png" mode=""></image>
			</view>
			<view slot='right' class="top_right">
				<image @click='gonggao' src="../../static/home_page/xx.png" mode=""></image>
			</view>
		</u-navbar>
		<view class="banner">
			<image src="../../static/home_page/banner.png" mode=""></image>
		</view>
		<view class="notice">
			<view class="">
				<image src="../../static/home_page/gongg.png" mode=""></image>
			</view>
			<view class="">
				<text>热门资讯资讯</text>
			</view>

		</view>
		<view class="soll">
			<view class="soll_view">
				<view>BTC/USDT</view>
				<view>
					<image src="../../static/home_page/sjt.png" mode=""></image>
				</view>
				<view style="color: rgba(241, 22, 20, 1);">3694.48</view>
				<view style="color: rgba(241, 22, 20, 1);">≈3487.21</view>
			</view>
			<view class="soll_view">
				<view>BTC/USDT</view>
				<view>
					<image src="../../static/home_page/sjt.png" mode=""></image>
				</view>
				<view style="color: rgba(241, 22, 20, 1);">3694.48</view>
				<view style="color: rgba(241, 22, 20, 1);">≈3487.21</view>
			</view>
			<view class="soll_view">
				<view>BTC/USDT</view>
				<view>
					<image src="../../static/home_page/sjt.png" mode=""></image>
				</view>
				<view>3694.48</view>
				<view>≈3487.21</view>
			</view>

		</view>
		<view class="soll">
			<view @click="shequ" class="soll_view_b">
				<image src="../../static/home_page/shqu.png" mode=""></image>
				<view class="soll_view_t">我的社区</view>
				<view class="soll_view_t1">邀请奖励 点击查看</view>
			</view>
			<view @click="zhangdan" class="soll_view_b">
				<image src="../../static/home_page/dzzd.png" mode=""></image>
				<view class="soll_view_t">电子账单</view>
				<view class="soll_view_t1">极速查询 轻松知晓</view>
			</view>
		</view>
		<view class="notice">
			<view class="">
				<image src="../../static/home_page/jqr.png" mode=""></image>

			</view>
			<view class="">
				<text>机器人任务列表</text>
			</view>
		</view>
		<view class="list">
			<view class="list_con" @click="jiqiren" v-for="(item,index) in 4" :key='index'>
				<image src="../../static/home_page/dajqr.png" mode=""></image>
				<view class="list_con_text">
					<view>小机器人</view>
					<view >
						<text>价格</text>
						<image src="../../static/home_page/jiag.png" mode=""></image>
						<text class="list_con_text_1">50U</text>
					</view>
					<view ><text>运行时间</text><text class="list_con_text_2">70</text>小时</view>
				</view>
				<view class="list_con_right">
					<text>去设置</text>
					<image src="../../static/home_page/sanj.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="" style="height: 40rpx;">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 公告
			gonggao(){
				uni.navigateTo({
					url: '/pages/home_page/news'
				});
			},
			// 社区
			shequ(){
				uni.navigateTo({
					url: '/pages/home_page/Invitation_reward'
				});
			},
			// 账单
			zhangdan(){
				uni.navigateTo({
					url: '/pages/home_page/purchase'
				});
			},
			// 机器人
			jiqiren(){
				uni.navigateTo({
					url: '/pages/home_page/Entrusted_funds'
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F0F0F0;
		padding-left: 2vw;
		padding-right:2vw ;
	}
	.top_right image {
		height: 44rpx;
		width: 44rpx;
		line-height: 44rpx;
		margin-right: 20rpx;
	}

	.top_left image {
		height: 44rpx;
		width: 44rpx;
		line-height: 44rpx;
		margin-left: 20rpx;
	}

	.banner image {
		width: 96vw;
		height: 280rpx;
	}

	.notice {
		display: flex;
	}

	.notice image {
		width: 28rpx;
		height: 28rpx;
		margin-top: 26rpx;
	}

	.notice text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40px;
		margin-left: 10rpx;
	}

	.soll {
		display: flex;
		width: 96vw;
	}

	.soll .soll_view {
		width: 33%;
		height: 210rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.35);
		border-radius: 16rpx;
	}

	.soll .soll_view {
		width: 33%;
		height: 210rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.35);
		border-radius: 16rpx;
		text-align: center;
	}

	.soll .soll_view:not(:nth-child(1)) {
		margin-left: 20rpx;
	}

	.soll_view view:nth-child(1) {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 48rpx;
		margin-top: 20rpx;
	}

	.soll image {
		width: 22rpx;
		height: 16rpx;
	}

	.soll_view view:nth-child(3) {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		font-weight: 800;
		color: #02AF74;
		line-height: 48rpx;
		margin-top: 10rpx;
	}

	.soll_view view:nth-child(4) {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		font-weight: 500;
		color: #02AF74;
		line-height: 36rpx;
	}

	.soll .soll_view_b {
		position: relative;
		width: 50%;
		margin-top: 30rpx;
		height: 140rpx;


	}

	.soll_view_b:nth-child(2) {
		margin-left: 20rpx;
	}

	.soll_view_b image {
		// position: absolute;
		width: 100%;
		height: 140rpx;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
	}

	.soll_view_t {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 36rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		z-index: 1;

	}

	.soll_view_t1 {
		position: absolute;
		right: 20rpx;
		top: 66rpx;
		z-index: 1;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;

	}

	.list_con {
		width: 96vw;
		height: 210rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		display: flex;
		position: relative;
	}
	.list_con>image{
		width: 90rpx;
		height: 144rpx;
		margin-top: 34rpx;
		margin-left: 50rpx;
	}
	.list_con_text{
		margin-left: 50rpx;
	}
	.list_con_text image{
		width: 28rpx;
		height: 30rpx;
		position: relative;
		top: 8rpx;
		margin-left: 20rpx;
	}
	.list_con_text view:nth-child(1){
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 36rpx;
		margin-top: 30rpx;
	}
	.list_con_text view:nth-child(2){
		margin-top:20rpx ;
	}
	.list_con_text view:nth-child(2)>text:nth-child(1){
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 36rpx;
	}
	.list_con_text_1 {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #C79660;
		line-height: 36rpx;
		margin-left: 6rpx;
		position: relative;
		top: 4rpx;
	}
	.list_con_text view:nth-child(3){
		margin-top: 20rpx;
	}
	.list_con_text view:nth-child(3)>text:nth-child(1){
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 36rpx;
	}
	 .list_con_text_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 36rpx;
		margin-left: 10rpx;
		
		
	}
	.list_con_right{
		width: 130rpx;
		height: 50rpx;
		background: #1989FA;
		border-radius: 25rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		position: absolute;
		right: 28rpx;
		top: 50%;
		margin-top: -25rpx;
	}
	.list_con_right image{
		width: 10rpx;
		height: 14rpx;
		position: relative;
		top: -4rpx;
		left: 4rpx;
	}
	.list_con:not(:nth-child(1)){
		margin-top: 20rpx;
	}
</style>
